<!--  -->
<template>
    <div style="overflow: hidden;">
        <h1 style="float: left;">全部收藏</h1>
    </div>
    <el-divider />
    <div class="infinite-list-wrapper">
        <ul
        v-infinite-scroll="load"
        class="list"
        :infinite-scroll-disabled="disabled"
        >
            <li v-for="item in myCollectArticle" :key="i" class="list-item" style="overflow: hidden;">
                <el-avatar
                    :size="64"
                    class="mr-3"
                    :src="item.cover"
                    style="margin: 0px 15px;"
                    @click="this.$router.push({name: 'article', query: {id: item.a_id}})"
                />
                <div>
                    <el-text><h2>{{ item.title }}</h2></el-text>
                </div>
                <div style="flex: auto;text-align: right;margin-right: 10px;">
                    <el-button @click="stared(item.a_id)" style="font-size: 18px;" :icon="true?'RemoveFilled':'CirclePlusFilled'" type="text"></el-button>
                </div>
            </li>
        </ul>
        <p v-if="loading">Loading...</p>
        <p v-if="noMore">No more</p>
    </div>
</template>

<script>
import axios from "axios";
import { computed } from "vue";
import { ElMessage } from 'element-plus'

export default {
  name: 'CollectArticle',
  components: {},
  props: {},
  data() {
    return {
      // value:3.7,  //评分，在真实数据内部，后续不需要此假数据
      start: 0,   //当前数据总长，即下次获取的内容初始值-1
      step:5,
      loading: false,
      dataNum:60,
      noMore: computed(() => {
        return this.start >= this.dataNum;
      }),
      disabled: computed(() => {
        return this.loading || this.noMore;
      }),
      myCollectArticle:[]
    };
  },
  computed: {},
  watch: {},
  methods: {
    load() {
      this.loading = true;
      setTimeout(() => {
        //获取要加载的数据

        this.start += this.step;
        this.loading = false;
      }, 500);
    },
    stared(id){
        axios.get('http://localhost:8888/article/star',{
          params:{
            u_id:this.$store.state.user.u_id,
            a_id:id
          }
        }).then(data=>{
          if(data.data.data){
            ElMessage({
              message: data.data.msg,
              type: 'success',
            })
          }else{
            ElMessage({
              message: data.data.msg,
              type: 'error',
            })
          }
          
          this.$router.go(0)
        })
    },
    init(){
        axios.get('http://localhost:8888/article/getAllCollectArticle',{
        params:{
          u_id:this.$store.state.user.u_id,
          start:this.start,
          end:this.start+this.step
        }
      }).then(data=>{
        if(data.data.data){
            this.dataNum = data.data.data.length;
            this.myCollectArticle = data.data.data
            console.log(this.myCollectArticle);
        }
      })
    }
  },
  created() {
    this.$store.state.lastActiveComponent = "collectarticle"
    this.init()
  },
  mounted() {}
}
</script>

<style scoped>
.infinite-list-wrapper {
  /* height: 100%; */
  text-align: center;
}
.infinite-list-wrapper .list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-wrapper .list-item {
  display: flex;
  align-items: center;
  justify-self: center;
  height: 80px;
  background: var(--el-color-success-light-9);
  color: var(--el-color-danger);
}

.infinite-list-wrapper .list-item:hover{
  background: var(--el-color-success-light-8);
  color: var(--el-color-danger);
  cursor: pointer;
}
.infinite-list-wrapper .list-item + .list-item {
  /* margin-top: 10px; */
  border-top: 1px solid var(--el-border-color-light);
}
</style>
